<template>
  <div class="app-container calendar-list-container">
    <div v-if="visible">
      <el-form :model="entity" :rules="dataRule" ref="entity" label-width="80px" size="small">
        <el-row>
          <el-col :span="6">
            <el-form-item label="工艺编号" prop="technologyCode">
              <el-input v-model="entity.technologyCode" placeholder="工艺编号" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料名称" prop="name">
              <el-input v-model="entity.name" placeholder="物料名称" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="global.modelName" prop="modelName">
              <el-input v-model="entity.modelName" :placeholder="global.modelName" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item :label="global.modelProp" prop="modelProp">
              <el-input v-model="entity.modelProp" :placeholder="global.modelProp" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="物料类型" prop="materialTypeName">
              <el-input v-model="entity.materialTypeName" placeholder="物料类型" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="单位" prop="unit">
              <el-input v-model="entity.unit" placeholder="单位" :readonly="true"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="处理方式" prop="stepMothed">
              <el-input v-model="entity.stepMothed" placeholder="处理方式"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6" v-for="(prop,index) in entity.props" :key="index">
            <el-form-item :label="prop.name" :prop="prop.prop">
              <el-input v-model="prop.value" :placeholder="prop.name" :readonly="view"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="工艺说明" prop="remark">
              <quill-editor v-model="entity.remark" ref="quillEditor" style="height:300px" :options="{ modules:{ toolbar:[ ['bold', 'italic', 'underline', 'strike']]}}">
              </quill-editor>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="">
              <div class="w-table">
                <buttons :showQuery="false" :showBack="false" @add="doAdd" @copy="doCopy" :list="btnList" :disabled="false" :permissions="permissions"></buttons>
                <grid gridTitle="原料" :columns="columns" :enableEdit="true" :loading="false" ref="mainGrid" height="400" :pagination="false" @delete="doDelete"
                  :permissions="permissions" :keyEditStep="1">
                </grid>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <div class="dialog-footer-div">
          <el-button @click="cancel()">取消</el-button>
          <el-button v-if="!view" type="primary" @click="submit()">确定</el-button>
        </div>
      </span>
      <GridDialog ref="goodsGridDialog" :multi="true" :url="goodsUrl" :columns="goodsColumns" @select="selectGoodsData" :permissions="permissions" :queryEntity="queryEntity"
        :queryList="modelQueryList">
      </GridDialog>
      <GridDialog ref="techGridDialog" :multi="false" :url="goodsUrl" :columns="goodsColumns" @select="selectTechData" :permissions="permissions" :queryEntity="queryEntity"
        :queryList="modelQueryList">
      </GridDialog>
    </div>
  </div>
</template>

<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import GridDialog from '@/components/GridDialog'
import grid from '@/components/Grid'
import { mapGetters } from 'vuex'
import { queryField } from '@/const/query'
import buttons from '@/components/Buttons'
import { dict } from '@/const/dict'

export default {
  components: { grid, buttons, GridDialog },
  data () {
    return {
      view: false,
      goodsUrl: url.MODEL_LIST_URL,
      modelQueryList: queryField().modelName,
      queryEntity: { status: 1 },
      entity: {
      },
      goodsColumns: [
        { label: this.global.modelName, width: 100, prop: 'modelName', align: 'left' },
        { label: this.global.modelProp, width: 120, prop: 'modelProp', align: 'left' },
        { label: '物料名称', width: 360, prop: 'materialName', align: 'left' },
        { label: '物料类型', width: 100, prop: 'materialTypeName', align: 'center' },
        { label: '单位', width: 80, prop: 'unit', align: 'center' }
      ],
      columns: [
        { label: '原料类型', width: 100, prop: 'modelType', align: 'center', template: 'select', selectDatas: dict().ModelType },
        { label: this.global.modelName, width: 100, prop: 'modelName', align: 'center' },
        { label: this.global.modelProp, width: 100, prop: 'modelProp', align: 'center' },
        { label: '物料名称', width: 370, prop: 'materialName', align: 'center' },
        { label: '物料类型', width: 100, prop: 'materialTypeName', align: 'center' },
        { label: '单位', width: 100, prop: 'unit', align: 'center', template: 'select', selectDatas: dict().Unit },
        { label: '用量', width: 120, prop: 'useQuantity', align: 'center', template: 'edit', type: 'number' },
        { label: '操作', width: 80, prop: 'op', align: 'center', template: 'op', opList: [{ name: '删除', clickName: 'delete', auth: 'yes' }] }
      ],
      btnList: [
        { name: '新增原料', type: 'primary', icon: 'edit', click: 'add', auth: 'yes', ctr: false },
        { name: '复制工艺', type: 'primary', icon: 'edit', click: 'copy', auth: 'yes', ctr: false }
      ],
      dataRule: {
        stepMothed: [
          { required: true, message: '处理方式不能为空', trigger: 'blur' },
          { min: 2, message: '长度在不能小于2', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  props: {
    visible: {
      type: Boolean,
      default: function () {
        return false
      }
    }
  },
  methods: {
    init (title, code) {
      this.$nextTick(() => {
        this.title = title
        this.loadTech(code)
      })
    },
    loadTech (modelCode) {
      this.viewUrl(modelCode).then(data => {
        if (data) {
          this.entity = data
          if (data.goods) {
            data.goods.forEach(row => {
              this.$refs['mainGrid'].addRow(row)
            })
          } else {
            this.$refs['mainGrid'].deleteAll()
          }
        }
      });
    },
    doCopy () {
      this.$refs['techGridDialog'].show()
    },
    selectTechData (row) {
      this.viewUrl(row.modelCode).then(data => {
        if (data) {
          this.entity.stepMothed = data.stepMothed
          this.entity.remark = data.remark
          if (data.goods) {
            data.goods.forEach(rows => {
              this.$refs['mainGrid'].addRow(rows)
            })
          } else {
            this.$refs['mainGrid'].deleteAll()
          }
        }
      });
    },
    doAdd () {
      this.$refs['goodsGridDialog'].show()
    },
    doDelete (row) {
      this.$refs['mainGrid'].deleteRow(row)
    },
    selectGoodsData (rows) {
      rows.forEach(row => {
        const rowData = {
          modelCode: row.modelCode,
          modelName: row.modelName,
          materialName: row.materialName,
          materialTypeName: row.materialTypeName,
          modelProp: row.modelProp,
          unit: row.unit
        }
        this.$refs['mainGrid'].addRow(rowData)
      })
    },
    cancel () {
      this.$emit('cancel')
    },
    submit () {
      this.$refs['entity'].validate((valid) => {
        if (valid) {
          let tech = this.entity
          tech.goods = this.$refs['mainGrid'].getData()
          this.handleUrl(tech).then((data) => {
            if (data) {
              this.$emit('cancel')
            }
          })
        }
      })
    },
    handleUrl (data) {
      return request({
        url: url.TECH_ADD_URL,
        method: 'post',
        data
      })
    },
    viewUrl (modelCode) {
      return request({
        url: url.TECH_VIEW_URL,
        method: 'post',
        params: { modelCode },
        data: { key: 'key' }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.w-table {
  border: 1px solid #ebeef5;
  margin-top: 50px;
}
</style>
